<template>
  <div class="textarea">
    <yf-plane :btnText="btnText" @click="click" :icon="icon" :title="title">
      <div class="text">
        <textarea  :disabled="disable" v-model="val" @blur.prevent="autoScroll()"  class="input" :placeholder="info"/>
      </div>
    </yf-plane>
  </div>
</template>

<script>
import yfPlane from '../../components/base/yf-plane'
export default {
  props: {
    disable: Boolean,
    btnText: String,
    icon: String,
    title: String,
    info: String,
    value: String
  },
  computed: {
    val: {
      get () {
        return this.value
      },
      set (newVal) {
        this.$emit('input', newVal)
      }
    }
  },
  methods: {
    click () {
      this.$emit('click')
    },
    autoScroll () { // 解决输入法弹起后 无法自动收回
      const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
      window.scrollTo(0, Math.max(scrollHeight - 1, 0))
    }
  },
  components: {
    yfPlane
  }
}
</script>

<style scoped lang="stylus">
  .textarea
    .text
      padding 0 20px
      .input
        margin-bottom 26px
        color #55545d
        dpr-font(14px)
        padding 12px 12px
        line-height 20px
        width:285px;
        height:140px;
        background:rgba(236,234,234,1);
        border none
        outline none
</style>
